.multi-workspace-api-client-sidebar {
  width: 320px;
  flex: 0 0 auto;
  border-right: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--border-dark);
  background-color: var(--requestly-color-background);

  .storage-communication-note {
    display: flex;
    background: var(--requestly-color-primary-900);
    padding: 4px 4px 8px 8px;
    line-height: 17px;
    font-size: var(--requestly-font-size-xs);
    color: var(--requestly-color-primary-300);

    svg {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    img {
      margin-right: 6px;
    }

    p {
      margin-top: 4px;
      margin-bottom: 0;
      margin-right: 4px;
    }
  }

  .api-client-sidebar-header {
    flex: 0 0 auto;
    padding: 3px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-dark);

    .actions {
      flex-shrink: 0;
    }
  }

  .api-client-sidebar-content {
    display: flex;
    flex-direction: column;
    height: inherit;
    overflow-y: auto;
  }

  .api-client-sidebar-tabs {
    flex: 1;
    overflow: hidden;
    background-color: var(--requestly-color-background);

    .api-client-sidebar-placeholder {
      height: 100%;
      width: 100%;
      display: flex;
      gap: 10px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 8px;

      .ant-typography {
        text-align: center;
      }
    }

    .api-history-list-container {
      width: 100%;
      height: 100%;
      flex: auto;
      padding-right: 8px;
      overflow: auto;
      padding-left: 8px;
      padding-top: 16px;
      margin-top: 8px;

      .ant-timeline-item {
        padding-bottom: 18px;

        // .ant-timeline-item-head {
        //   margin-top: 3px;
        // }

        .ant-timeline-item-tail {
          margin-top: 12px;
        }

        .ant-timeline-item-content {
          margin-left: 10px;
          margin-bottom: 8px;
        }
      }

      .api-history-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        line-height: 23px;
        padding: 0 4px;
        margin: -8px 10px;
        border-radius: 4px;

        &.active,
        &.clickable:hover {
          cursor: pointer;
          background-color: var(--gray-dark);

          .api-history-url {
            color: var(--requestly-color-text-default);
          }
        }

        .api-method {
          flex-shrink: 0;
          vertical-align: middle;
          font-size: var(--requestly-font-size-2xs, 11px);
        }

        .api-history-url {
          font-size: var(--requestly-font-size-sm, 12px);
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          line-height: 18px;
          display: -webkit-box;
          line-clamp: 1;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .api-history-start-marker {
          font-size: var(--requestly-font-size-sm, 13px);
        }
      }
    }

    .ant-tabs-nav {
      margin-bottom: 0;
      padding: 0;
      min-width: 40px;

      .ant-tabs-nav-list {
        padding: 4px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .ant-tabs-tab {
        margin: 0;
        padding: 0;
        border-radius: 4px;

        &:hover {
          background-color: var(--requestly-color-white-t-10);
        }

        &.ant-tabs-tab-active {
          background-color: var(--requestly-color-white-t-20);

          svg {
            color: var(--requestly-color-text-default);
          }
        }

        .ant-tabs-tab-btn,
        .ant-tabs-tab-btn:active {
          color: var(--requestly-color-text-subtle);
        }

        .api-client-tab-link {
          width: 32px;
          height: 32px;
          padding: 0 8px;
          border-radius: 4px;

          display: flex;
          align-items: center;
          gap: 4px;
          font-size: var(--requestly-font-size-sm);
          color: inherit;

          svg {
            width: 16px;
            height: 16px;
          }
        }
      }
    }

    .ant-tabs-content {
      height: 100%;

      .ant-tabs-tabpane {
        padding: 0;
        height: 100%;
        padding-bottom: 45px;
      }
    }

    .ant-tabs-ink-bar {
      display: none;
    }
  }
}

.api-client-new-btn-dropdown-overlay {
  .new-btn-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--requestly-color-text-default);

    svg {
      width: 16px;
      height: 16px;
      color: var(--requestly-color-text-subtle);
    }
  }
}
